<template>
  <div class="container-publish">
    <el-card>
      <!-- 使用自己封装的面包屑组件 -->
      <div slot="header">
        <my-bread>{{$route.query.id?'修改':'发布'}}文章</my-bread>
      </div>
      <el-form label-width="120px">
        <el-form-item label="标题：">
          <el-input v-model="articleForm.title" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="内容：">
          <!-- 富文本 -->
          <quill-editor v-model="articleForm.content" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item label="封面：">
          <el-radio-group @change="articleForm.cover.images=[]" v-model="articleForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <div>
            <!-- 组件位置 -->
            <div v-if="articleForm.cover.type===1">
              <my-image v-model="articleForm.cover.images[0]"></my-image>
            </div>
            <div v-if="articleForm.cover.type===3">
              <my-image :key="i" v-for="i in 3" v-model="articleForm.cover.images[i-1]"></my-image>
            </div>
            <!-- <my-image></my-image> -->
          </div>
        </el-form-item>
        <el-form-item label="频道：">
          <!-- 自己封装的组件 -->
          <my-channel v-model="articleForm.channel_id"></my-channel>
        </el-form-item>
        <!-- 修改文章 -->
        <el-form-item v-if="$route.query.id">
          <el-button @click="updata()" type="success">修改文章</el-button>
        </el-form-item>
        <!-- 发布文章 -->
        <el-form-item v-else>
          <el-button @click="submit(false)" type="primary">发布文章</el-button>
          <el-button @click="submit(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 演示组件封装数据的双向绑定 -->
    <!-- <my-increment :value="count" @input="count=$event"></my-increment> -->
    <!-- 上面的代码可简写为 使用v-model 实现数据的双向绑定 -->
    <!-- <my-increment v-model="count"></my-increment> -->
  </div>
</template>

<script type="text/javascript">
// import MyIncrement from "@/components/my-increment";

// 引入富文本需要的样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 引入富文本组件的配置对象
import { quillEditor } from "vue-quill-editor";

export default {
  // components: { MyIncrement },
  name: "app-publish",
  components: { quillEditor },
  data() {
    return {
      // count: 0,
      // 文章数据
      articleForm: {
        title: null,
        channel_id: null,
        content: null,
        cover: {
          // 封面类型 -1:自动，0-无图，1-1张，3-3张
          type: 1,
          // 放图片地址
          images: []
        }
      },
      // 富文本配置对象
      editorOption: {
        // 占位文字
        placeholder: "",
        // 模块配置
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            ["image"]
          ]
        }
      }
    };
  },
  watch: {
    // 监听地址栏id的变化(因为要根据id判断究竟是“修改文章”还是“发布文章”  有id:修改  没有id:发布)
    // 监听id
    "$route.query.id": function() {
      this.toggleFormInfo();
    }
  },
  created() {
    // 当是“修改文章”的时候，调用“获取文章信息函数”填充表单
    if (this.$route.query.id) {
      this.getArticles();
    }
  },
  methods: {
    // 根据“修改文章”和“发布文章”切换表单内容
    toggleFormInfo() {
      if (this.$route.query.id) {
        // 修改文章(表单应该有要修改的内容)
        // 调用“获取文章信息函数”填充表单
        this.getArticles();
      } else {
        // 发布文章(表单内容为空)
        // 不应该直接将表单清空(即：不能使用this.articleForm = {}),因为这样模板中articleForm.cover.type 会报错
        // 必须保证模板中依赖的字段都有对应的数据，保证模板编译不报错
        this.articleForm = {
          title: null,
          channel_id: null,
          content: null,
          cover: {
            type: 1,
            images: []
          }
        };
      }
    },
    // 获取文章信息函数
    async getArticles() {
      const res = await this.$http.get(`articles/${this.$route.query.id}`);
      this.articleForm = res.data.data;
    },
    // 添加文章 draft===false:发布文章   draft===true:存入草稿
    async submit(draft) {
      try {
        // 发请求
        await this.$http.post(`articles?draft=${draft}`, this.articleForm);
        // 提示信息
        this.$message.success(draft ? "存入草稿成功" : "发布文章成功");
        // 跳转到"内容管理"页面
        this.$router.push("/article");
      } catch (e) {
        this.$message.error("操作失败");
      }
    },
    // "修改文章"的函数
    async updata() {
      try {
        // 注意：修改文章，只有“发布”,没有“草稿”
        // 路径传参：需要id
        // 键值对传参：需要draft
        // 请求体传参：articleForm
        await this.$http.put(
          `articles/${this.articleForm.id}?draft=false`,
          this.articleForm
        );
        // 提示信息
        this.$message.success("修改成功");
        // 跳转到“内容管理”页面
        this.$router.push("/article");
      } catch (e) {
        this.$message.error("修改失败");
      }
    }
  }
};
</script>

<style scoped lang="less" >
</style>
